import React from 'react';
import { Button, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowLeftOutlined } from '@ant-design/icons';

interface PageHeaderProps {
  title: string;
  showBack?: boolean;
  extra?: React.ReactNode;
}

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  showBack = false,
  extra
}) => {
  const navigate = useNavigate();
  const { t } = useTranslation();

  return (
    <div className="flex justify-between items-center mb-6">
      <Space>
        {showBack && (
          <Button
            icon={<ArrowLeftOutlined />}
            onClick={() => navigate(-1)}
            aria-label={t('common.back')}
          >
            {t('common.back')}
          </Button>
        )}
        <h1 className="text-2xl m-0">{title}</h1>
      </Space>
      {extra && <div>{extra}</div>}
    </div>
  );
};